<template>
    <div class="spec-preview">
        <vue-photo-zoom-pro v-if="skuInfo"
        :url="skuInfo.skuImageList[selected].imgUrl" :scale="2" :width="200" :height="200"
        type="square" :out-zoomer="true"  :zoomer-style="{background:'pink',opacity:'.5'}" 
        :out-zoomer-style="{marginTop:'-1px',left:'0px', zIndex:'999',background:'white'}"
        ></vue-photo-zoom-pro>
        <!-- <img v-if="skuInfo" :src="skuInfo.skuImageList[selected].imgUrl" />
        <div class="event"></div>
        <div class="big">
            <img v-if="skuInfo" :src="skuInfo.skuImageList[selected].imgUrl" />
        </div>
        <div class="mask"></div> -->
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        name: "Zoom",
        data() {
            return {
                selected: 0 //选中的图片
            }
        },
        computed: {
            ...mapState({
                skuInfo: state => state.detail.goodsDetail.skuInfo
            })
        },
        mounted() {
            this.$bus.$on('chooseImg', (index) => {
                this.selected = index
            })
        }
    }
</script>

<style lang="less">
    .spec-preview {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #ccc;

        img {
            width: 100%;
            height: 100%;
        }

        .event {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
        }

        .mask {
            width: 50%;
            height: 50%;
            background-color: rgba(0, 255, 0, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big {
            width: 100%;
            height: 100%;
            position: absolute;
            top: -1px;
            left: 100%;
            border: 1px solid #aaa;
            overflow: hidden;
            z-index: 998;
            display: none;
            background: white;

            img {
                width: 200%;
                max-width: 200%;
                height: 200%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        .event:hover~.mask,
        .event:hover~.big {
            display: block;
        }
    }
</style>